<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

<ui:composition template="/WEB-INF/templates/default.xhtml">
	<ui:define name="content">
		<h:form id="options">
			<div class="frmOpciones">
				<p:panel id="controles" styleClass="controles">
					<div class="inputOptions">
						<h:outputLabel value="Periodo" for="idPeriodo" />
						<p:selectOneMenu id="idPeriodo"
							value="#{proyeccionFfvvMBean.periodoDefault}">
							<f:selectItem itemLabel="- Periodo -" itemValue="0" />
							<f:selectItems value="#{proyeccionFfvvMBean.listaPeriodos}"
								var="periodo" itemLabel="#{periodo.descripcion}"
								itemValue="#{periodo.id}" />
						</p:selectOneMenu>
					</div>
					<div class="inputOptions">
						<h:outputLabel value="Zona" for="idZona" />
						<p:selectOneMenu id="idZona" value="#{proyeccionFfvvMBean.idZona}">
							<f:selectItem itemLabel="- Todos -" itemValue="0" />
							<f:selectItems value="#{proyeccionFfvvMBean.listaZonas}"
								var="zona" itemLabel="#{zona.codigo}" itemValue="#{zona.id}" />
						</p:selectOneMenu>
					</div>
					<div class="inputOptions">
						<h:outputLabel value="Canal" for="idCanal" />
						<p:selectOneMenu id="idCanal"
							value="#{proyeccionFfvvMBean.idCanal}">
							<f:selectItem itemLabel="- Todos -" itemValue="0" />
							<f:selectItems value="#{proyeccionFfvvMBean.listaCanales}"
								var="canal" itemLabel="#{canal.categoria}"
								itemValue="#{canal.id}" />
						</p:selectOneMenu>
					</div>
					<div class="inputOptions">
						<div class="buttomProyeccion">
							<p:commandButton value="Mostrar"
								actionListener="#{proyeccionFfvvMBean.inicializar()}"
								id="frmMostrar" update=":tabAvance,:tabAvance:treeFFVV" />
						</div>
					</div>
				</p:panel>
			</div>
		</h:form>
		<p:tabView id="tabAvance" styleClass="tabAvance" dynamic="true">
			<p:tab title="Avance Monto" id="tabGrafico"
				titleStyleClass="titleTab">
				<h:form id="treeFFVV">
					<p:treeTable value="#{proyeccionFfvvMBean.root}" var="ffvv"
						selectionMode="single" 
						selection="#{proyeccionFfvvMBean.selectedNode}" emptyMessage="No se Encontro Datos" >
						<p:ajax event="select" listener="#{proyeccionFfvvMBean.onNodeSelect}" update=":tabAvance, :tabAvance:idAvances" />
						<p:column headerText="Cargo" sortBy="#{ffvv.cargo}">
							<h:outputText value="#{ffvv.cargo}" />
						</p:column>
						<p:column headerText="Nombre">
							<h:outputText value="#{ffvv.nombre}" />
						</p:column>
						<p:column headerText="Apellido">
							<h:outputText value="#{ffvv.apellido}" />
						</p:column>
						<p:column headerText="Porcetaje Avance">
							<p:progressBar styleClass="#{ffvv.colorBanda}"
								value="#{ffvv.porcentajeAvance}" labelTemplate="{value}%"
								displayOnly="true" />
						</p:column>
						<p:column headerText="Monto Avance">
							<h:outputText
								value="#{ffvv.montoAvancePeriodo} / #{ffvv.montoProyeccionPeriodo}" />
						</p:column>
					</p:treeTable>
				</h:form>
			</p:tab>
			<p:tab title="Avance Productos" id="tabProducto" disabled="#{proyeccionFfvvMBean.bloquear}"
				titleStyleClass="titleTab">
				<ui:include src="avanceffvvproducto.xhtml" />
			</p:tab>
		</p:tabView>
	</ui:define>
</ui:composition>
</html>